<template>
    <view class="content">
        <view class="top">
			<image :src="data.old_members.image_uri" class="avatar"></image>
			<view class="u-flex-1">
				<view>{{data.old_members.nickname}}</view>
				<view>赠送给你一张一诺健康管理卡</view>
			</view>
		</view>
		
		<view class="card">
			<image src="../../static/image/bg_4.png" class="bg-3"></image>
			<view class="info">
				<view>一诺健康管理卡</view>
				<view class="num">NO.{{data.card_no}}</view>
				<view class="info-d">
					<view class="time">
						<view>已加入会员</view>
						<view class="u-font-32 text-bold">{{data.member_nums}}</view>
					</view>
					<view class="line"></view>
					<view class="time">
						<view>近3日新增</view>
						<view class="u-font-32 text-bold">{{data.add_nums}}</view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="btn" v-if="data.status == 0" @click="doAccept">立即领取</view>
		<view class="btn btn2" v-else>已被领取</view>
		
		<view class="tip" v-if="data.status != 0">
			此卡已被领取，请前往公众号<text @click="$sTo(`/pages/tabbar/mine`)">“个人中心”</text>查看
		</view>
		
		<u-mask :show="show" mode="center" border-radius="30">
		    <view class="popup">
		        <view class="win-box3">
		            <image src="../../static/image/pop.png" class="pop-img" @click="show = false"></image>
		            <image src="/static/icon/close.png" class="pop-del" @click="show = false"></image>
		        </view>
		    </view>
		</u-mask>
    </view>
</template>

<script>
	import {
	    ajaxPost,
	    isNull,
	    getSync,
	    getParam,
	    setSync
	} from '../../static/js/common.js'
    export default {
        data() {
            return {
                show: false,
				data: {},
				card_no: '',
				pid: '',
            };
        },
        onLoad(option) {
			console.log('card-option',option)
			if (option.cno) {
				this.card_no = option.cno
			}
			if (option.pid) {
				this.pid = option.pid
			}
        	
			this.getDetail()
        },
        methods: {
            // 立即领取
            doAccept() {
				if (!this.$getSync('userToken')) {
					this.$setSync('cardNo',this.card_no)
					
					// this.$gTo(`/pages/login/loginH?from=${2}`)
					this.login();
					
				} else {
					this.$ajax('accept_transfer', {
					    userToken: this.$getSync('userToken'),
						transfer_id: this.card_no || this.$getSync('cardNo'),//转赠记录编号
					}).then(ret => {
						if (ret.status == 0) {
							this.show = true
							
							this.data.status = 1
							this.getDetail()
					        setTimeout(() => {
								uni.removeStorageSync('cardNo')
							}, 600)
						} else {
							this.$toast(ret.message);
						}
					});
				}
            },
			
			getDetail() {
				this.$ajax('transfer_detail', {
					transfer_id: this.card_no || this.$getSync('cardNo'),//转赠记录编号
				}).then(ret => {
					if (ret.status == 0) {
				        this.data = ret.data
					} else {
						// this.$toast(ret.message);
					}
				});
			},
			
			login() {
			    const _this = this;
			    let url = window.location.href;
			    console.log('code', getParam('code'))
			    if (getParam('code')) {
			        let code = getParam('code');
			        _this.code(code)
			    } else {
			        window.location.href =
			            'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx552129804846d230&redirect_uri=' +
			            encodeURIComponent(url) + '&response_type=code&scope=snsapi_userinfo&state=123#wechat_redirect';
			    }
			},
			
			code(code) {
			    ajaxPost('weixin', {
			        code: code, //微信授权码
			    }).then(res => {
			        console.log('weixin', res)
			        if (res.status == 0) {
			            uni.setStorageSync('userToken', res.data.userToken); //存token
			            
						this.doAccept()
			        }
			    })
			},
        }
    };
</script>

<style lang="scss">
	
	.popup {
	    width: 100vw;
	    height: 100vh;
	    display: flex;
	    align-items: center;
	    justify-content: center;
	    flex-direction: column;
	}
	.win-box3 {
	    width: 616rpx;
		position: relative;
	}
	.pop-img{
		width: 616rpx;
		height: 512rpx;
	}
	.pop-del {
	    width: 7vw;
	    height: 7vw;
	    position: absolute;
	    left: 38vw;
	    bottom: -100upx;
	}
	
    page{
        background: linear-gradient(to top,#f5f5f5,#f5f5f5,#f5f5f5,#01b6bc);
    }
    .content{
    	padding: 20rpx 20rpx 200rpx;
    	min-height: 100vh;
    }
	
	.top{
		font-size: 32rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 30rpx;
	}
	.avatar{
		width: 86rpx;
		height: 86rpx;
		border: 2rpx solid #fff;
		border-radius: 50%;
		margin-right: 20rpx;
	}
	
	
	.card{
		margin-bottom: 30rpx;
		position: relative;
	}
	.bg-3{
		width: 710rpx;
		height: 348rpx;
	}
	.info{
		width: 710rpx;
		height: 348rpx;
		padding: 40rpx;
		position: absolute;
		top: 0;
		left: 0;
		font-size: 30rpx;
		color: #843d12;
	}
	.num{
		font-size: 44rpx;
		font-weight: bold;
		padding: 60rpx 0;
	}
	
	.info-d{
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.time{
		font-size: 24rpx;
	}
	.line{
		width: 2rpx;
		height: 54rpx;
		background-color: #843d12;
		margin: 0 20rpx;
	}
	
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}
	.btn2{
		background: #b3b3b3;
	}
	.tip{
		font-size: 26rpx;
		color: #7b7b7b;
		text-align: center;
	}
	.tip>text{
		color: #3373c1;
	}
	

</style>
